<template>
	<view class="weekly-calendar">
		<view class="calendar-title">
			<view class="left-triangle" @click="preWeek()">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<picker mode="date" :value="format(currentDay, 'yyyy-MM-dd')" @change="bindDateChange">
        <view class="week-number">第{{getNatureWeek}}周</view>
				<view class="daterange">{{getDateRange}}</view>
			</picker>
      <view class="right-triangle" @click="nextWeek()">
      	<u-icon name="arrow-right"></u-icon>
      </view>
		</view>
    
		<view class="calendar-content-wrapper">
			<view class="calendar-events-container">
        <view class="date-section" :class="{'is-today': day.isToday}" v-for="(day, index) in currentWeek" :key="index">
          <view class="week">{{day.weekName}}</view>
          <view class="day">{{day.day}}</view>
          <view class="course-list">
            <view v-for="course in day.courseList" :key="course.id" @click="handleSelectCourse(course)">
            	<view class="course-block">
                <view class="course-title">{{course.title}}</view>
                <view class="status"></view>
              </view>
            </view>
            <view class="time-slot" :class="{line: (val === 12 || val === 18)}" v-for="(val,i) in timeSlotList" :key="i"></view>
          </view>
        </view>
			</view>
			
			<view class="time-slot-container">
				<view class="time-slot" v-for="(val,index) in timeSlotList" :key="index">
					<view class="time">{{val}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
  import { getDay, getDate, isToday, format, addDays, subDays } from 'date-fns'

	export default {
		name: "CalendarWeekly",
		data() {
			return {
				// 当前日期，本周的某一天
				currentDay: new Date(),
				// 本周
				currentWeek:[],
				timeSlotList: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],
			}
		},
    computed: {
      getNatureWeek() {
        const firstDay = new Date(new Date().getFullYear(), 0, 1)
        const week = firstDay.getDay()
        const finalWeek = ((this.currentDay - firstDay) + 86400000 * (week-1))/(1000*60*60*24*7)
        return parseInt(finalWeek + 1)
      },
      getDateRange() {
      	const sunDay = this.currentWeek[0].date
        const saturday = this.currentWeek[6].date
        
      	return `${format(sunDay, 'yyyy.MM.dd')} - ${format(saturday, 'yyyy.MM.dd')}`
      },
    },
		created() {
			this.currentWeek = this.getWeeks(new Date());
			this.initCourseList();
		},
		methods: {
      format,
			initCourseList(){
				this.currentWeek.forEach(day => {
					day.courseList = []
				})
				
				this.currentWeek[0].courseList = [
					{
						id: 1,
						title: '围棋',
						startTime: 8,
						endTime: 12,
					},
          {
          	id: 2,
          	title: '羽毛球',
          	startTime: 13,
          	endTime: 14,
          }
				]
			},
			// 日历选择日期
			bindDateChange(e) {
				this.currentDay = new Date(e.target.value);
				this.currentWeek = this.getWeeks(e.target.value);
				this.initCourseList();
			},
			// 获取本周
      getWeekName(date) {
        switch(getDay(date)) {
          case 0:
            return '周日'
          case 1:
            return '周一'
          case 2:
            return '周二'
          case 3:
            return '周三'
          case 4:
            return '周四'
          case 5:
            return '周五'
          case 6:
            return '周六'
        }
      },
			getWeeks(date) {
				const weekList = [];
				const d = new Date(date);
				const day = d.getDay();
        
				for (let i = 0; i < 7; i++) {
					const obj = {
						date: "",
						isToday: false
					}
          
					if (day == i) {
						obj.date = d;
					} else if (day > i) {
						obj.date = subDays(d, (day - i));
					} else {
						obj.date = addDays(d, (i - day));
					}
          
          obj.weekName = this.getWeekName(obj.date)
          obj.day = getDate(obj.date)
          obj.isToday = isToday(obj.date)
          
          weekList[i] = obj 
				}
        
				return weekList;
			},
			// 获取上一周
			preWeek(){
				const date = subDays(this.currentDay, 7);
				this.currentDay = date;
				this.currentWeek = this.getWeeks(date);
				this.initCourseList();
			},
			//获取下一周
			nextWeek(){
				const date = addDays(this.currentDay, 7);
				this.currentDay = date;
				this.currentWeek = this.getWeeks(date);
				this.initCourseList();
			},
			getCourseStyle(course) {
				if (!course) {
					return {}
				}
				const { startTime, endTime } = course
				
				const height = `${(endTime - startTime) * 80}rpx`
				const top = `${(startTime - 8) * 80}rpx`
				
				return {
					top,
					height
				}
			},
			handleSelectCourse(course) {
				this.$Router.push('/pages/course-schedule/course-detail')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.weekly-calendar {
		width: 100%;
    padding: 16rpx;
    background: #F8F8F8;
		
		.calendar-title {
			display: flex;
      justify-content: space-between;
      padding: 12rpx 40rpx;
      background: #3EA9FF;
      border-radius: 6px;
      font-size: 40rpx;
      font-weight: 500;
      color: #FFFFFF;
      
      .left-triangle,
      .right-triangle {
        margin-top: 25rpx;
      }
      
      .week-number {
        text-align: center;
        font-size: 28rpx;
        line-height: 40rpx;
      }

			.daterange {
        text-align: center;
        font-size: 40rpx;
        font-weight: 500;
        line-height: 56rpx;
			}
		}

		.calendar-content-wrapper {
			position: relative;
			margin-left: 40rpx;
			text-align: center;
      
      .calendar-events-container {
      	position: relative;
        display: flex;
        
        .date-section {
          flex: 1;
          
          &.is-today {
            background: #E3F2FF;
          }
          
          .week {
            margin-top: 32rpx;
            font-size: 20rpx;
            color: #74776B;
            line-height: 28rpx;
          }
          
          .day {
            font-size: 34rpx;
            font-weight: 500;
            color: #333333;
            line-height: 48rpx;
          }
          
          .course-list {
            position: relative;
            margin-top: 16rpx;
            
            .time-slot {
              height: 80rpx;
              
              &.line {
                border: 0;
                border-top: 2rpx dashed #DDDDDD;
              }
            }
          }
        }
      	
      	.course-block {
      		position: absolute;
      		z-index: 10;
          width: 100%;
          padding: 20rpx 10rpx;
          background: #FFFFFF;
          border-radius: 12rpx;
          box-shadow: 0px 4rpx 10rpx 0px rgba(226, 240, 255, 0.5);
          
          .course-title {
            font-size: 24rpx;
            font-weight: 600;
            color: #666666;
            line-height: 48rpx;
            overflow: hidden;
          }
          
          &.finished {
            color: #FFFFFF;
            background: #B9CD00;
            box-shadow: 0px 4rpx 20px 0px rgba(185, 205, 0, 0.3);
          }
          
          &.active {
            color: #FFFFFF;
            background: #3EA9FF;
            box-shadow: 0px 4rpx 10rpx 0px rgba(226, 240, 255, 0.5);
          }
          
          &.absent{
            color: #FFFFFF;
            background: #F8BA00;
            box-shadow: 0px 2px 10px 0px rgba(248, 186, 0, 0.3);
          }
      	}
      }
    }

		.time-slot-container {
      position: absolute;
      top: 0;
      left: -40rpx;
			margin-top: 124rpx;
      
			.time-slot {
				.time {
          height: 80rpx;
					text-align: right;
          font-size: 20rpx;
          font-weight: 500;
          color: #DBDBDB;
          line-height: 28rpx;
				}
			}
		}
	}
</style>